<template>
	<view class="">

		<u-navbar title="意见反馈" :autoBack="true" :placeholder="true"></u-navbar>

		<view class="container">
			<view class="form">
				<view class="content">
					<view class="textarea-box">
						<textarea class="textarea" maxlength="200" @input="inputHandle" :value="feedBack"
							placeholder="尽可能详细的描述您的问题或建议" cols="30" rows="10"></textarea>
						<view class="remaining-words">剩余字数：<text>{{remainingWords}}</text>/200</view>
					</view>

<!-- 					<view class="img-box">
						<view class="img-celler" v-for="item in imgURLArr" :key="index">
							<view class="iconfont icon-guanbi" @click="removeHandle" :data-img="item"></view>
							<image class="img" :src="item"></image>
						</view>

						<view class="img-cell" @click="choseImgHandle" v-if="imgURLArr.length < 3">
							<view class="iconfont icon-xiangji">+</view>
						</view>
					</view> -->
				</view>

				<view class="button-box">
					<button v-if="remainingWords < 200" class="submit-button" @click="submitHandle">提交</button>
					<button v-else class="submit-button-no" disabled="true">提交</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {

		// 页面的初始数据
		data() {
			return {
				feedBack: '', //意见反馈的内容
				imgURLArr: [], //提交图片的url
				residue: 6, //剩余可提交图片张数
				remainingWords: 200, //剩余字数
			}
		},

		// 监听页面加载
		onLoad(options) {},

		methods: {
			// 监听输入框输入事件
			inputHandle(e) {
				console.log(e);
				let _this = this;
				let wordLenght = e.detail.value.length;
				_this.feedBack = e.detail.value;
				_this.remainingWords = 200 - wordLenght;
			},

			// 选择图片handle
			choseImgHandle() {
				let _this = this;
				wx.chooseImage({
					count: this.residue,
					success: res => {

						_this.imgURLArr = [...this.imgURLArr, ...res.tempFilePaths]
						// 计算剩余可提交图片张数
						_this.residue = 6 - this.imgURLArr.length
					}
				})
			},

			// 移除图片handle  
			removeHandle(e) {
				let _this = this;
				let removeImg = e.currentTarget.dataset.img;
				let list = _this.imgURLArr;

				// 循环删除选择的图片
				for (let i = 0; i < list.length; i++) {
					if (list[i] == removeImg) {
						list.splice(i--, 1)
						_this.imgURLArr = list
						// 计算剩余可提交图片张数
						_this.residue = 6 - this.data.imgURLArr.length
					}
				}
			},

			// 表单内容提交
			async submitHandle() {
				let _this = this;
				// 判断是否输入全为空格
				if (this.feedBack.length == 0) {
					wx.showToast({
						title: '内容不可为空！',
						icon: 'none'
					})
					return
				}
				let params = {
					sugText: this.feedBack
				}


				let res = await this.$api.addfeedback({
					cont: this.feedBack,
					image: '',
					userphone: '',
					uid: '',
				});
				
				if(res.code == 1){
					
				}

			},

			// 上传图片
			upImg(sugId) {
				let _this = this;

				let timestamp = Date.parse(new Date()).toString().substring(0, 10) * 1;
				let token = wx.getStorageSync('token');
				let privatekey = wx.getStorageSync('privateKey');
				let sign = wx.MD5('timestamp=' + timestamp + 'token=' + token + 'privatekey=' + privatekey).toUpperCase();
				let params = {
					token,
					timestamp,
					sign,
					sugId
				}; // 请求参数

				let upImgArr = this.data.imgURLArr
				for (let i = 0; i < upImgArr.length; i++) {
					wx.uploadFile({
						url: wx._baseUrl + '/problem/wechat/suggestPic.do',
						filePath: upImgArr[i],
						header: {
							'content-type': 'multipart/form-data',
							'accept': 'application/json'
						},
						method: 'POST',
						imgType: 1,
						name: 'imgFile', //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						formData: params, //HTTP 请求中其他额外的 form data
						success: function(res) {
							let data = JSON.parse(res.data);
							if (data.errorCode == '0') {
								wx.$toast('图片上传成功！');
								_this.setData({
									imgURLArr: ''
								})
							} else wx.$toast('图片上传失败!')

						},
						fail: err => {
							console.log(err)
							wx.ShowToastNone('图片上传失败!')
						}
					})
				}
			}
		},


	}
</script>

<style lang="scss" scoped>
	/* pages/user/feedback/feedback.wxss */
	.form {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
	}

	.content {
		margin: 32rpx 0 0 0;
		background-color: white;
		padding: 20rpx 20rpx 50rpx 20rpx;
	}

	.textarea {
		background-color: #f1f1f1;
		width: calc(100% - 48rpx);
		padding: 24rpx 26rpx 50rpx 24rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #333;
	}

	.img-box {
		margin: 32rpx 0 40rpx 0;
		display: flex;
		/* justify-content: space-around; */
	}

	.img-celler {
		height: 120rpx;
		width: 160rpx;
		margin-right: 48rpx;
		position: relative;
	}

	.img {
		height: 120rpx;
		width: 160rpx;
	}

	.icon-guanbi {
		position: absolute;
		color: #FF8900;
		right: 2rpx;
		top: 2rpx;
		/* 隐藏 */
		/* display: none;   */
	}

	.img-cell {
		height: 120rpx;
		width: 160rpx;
		border: 4rpx solid #f1f1f1;
		text-align: center;
		line-height: 120rpx;
		width: 160rpx;
		color: #999;
	}

	.icon-xiangji {
		font-size: 48rpx;
	}

	.button-box {
		margin: 20rpx 32rpx 12rpx 32rpx;
	}

	.remaining-words {
		color: #333;
		position: absolute;
		right: 40rpx;
		/* bottom:0rpx; */
		font-size: 28rpx;
		color: #333;
	}


	.submit-button {
		background-color: #111;
		color: white;
		border: none;
		border-radius: 50rpx;
	}

	.submit-button-no {
		background-color: #C9CCD4 !important;
		border: none;
		color: #999999 !important;
		border-radius: 50rpx;
	}
</style>